<template>
    <main-wrap :noFixed="true" bodyBg="none" :bodyStyle="{height:'100%',overflow: 'hidden'}">
        <div class="expendCon">
            <ul class="incomeList">
                <li @click="openDg(1)" v-if="data1.totalAmount">
                    <h5 v-t="'income.text9'">My Transaction Expenses</h5>
                    <div class="total">
                        <p><span v-t="'income.text12'">Accumulated Expenditure（</span>（$）</p>
                        <div class="amount">{{data1.totalAmount.decimalFourString}}</div>
                    </div>
                    <div class="incTabBox">
                        <div class="item">
                            <p v-t="'income.text6'">Today</p>
                            <div class="amount">{{data1.todayAmount.decimalTwoString}}</div>
                        </div>
                        <div class="item">
                            <p v-t="'income.text7'">thisweek</p>
                            <div class="amount">{{data1.weekAmount.decimalTwoString}}</div>
                        </div>
                        <div class="item">
                            <p v-t="'income.text8'">Thismonth</p>
                            <div class="amount">{{data1.monthAmount.decimalTwoString}}</div>
                        </div>
                    </div>
                </li>
                <li @click="openDg(2)" v-if="data2.totalBonus">
                    <h5 v-t="'income.text10'">My Advertising Expenses</h5>
                    <div class="total">
                        <p><span v-t="'income.text12'">Accumulated Expenditure（</span>（$）</p>
                        <div class="amount">{{data2.totalBonus.decimalTwoString}}</div>
                    </div>
                    <div class="incTabBox">
                        <div class="item">
                            <p v-t="'income.text6'">Today</p>
                            <div class="amount">{{data2.todayBonus.decimalTwoString}}</div>
                        </div>
                        <div class="item">
                            <p v-t="'income.text7'">thisweek</p>
                            <div class="amount">{{data2.weekBonus.decimalTwoString}}</div>
                        </div>
                        <div class="item">
                            <p v-t="'income.text8'">Thismonth</p>
                            <div class="amount">{{data2.monthBonus.decimalTwoString}}</div>
                        </div>
                    </div>
                </li>
                <li>
                    <h5 v-t="'income.text11'">My Operation Placement Expenses</h5>
                    <div class="total">
                        <p><span v-t="'income.text12'">Accumulated Expenditure（</span>（$）</p>
                        <div class="amount">--</div>
                    </div>
                    <div class="incTabBox">
                        <div class="item">
                            <p v-t="'income.text6'">Today</p>
                            <div class="amount">--</div>
                        </div>
                        <div class="item">
                            <p v-t="'income.text7'">thisweek</p>
                            <div class="amount">--</div>
                        </div>
                        <div class="item">
                            <p v-t="'income.text8'">Thismonth</p>
                            <div class="amount">--</div>
                        </div>
                    </div>
                </li>
            </ul>
            <!-- <div class="zc-bottom-btn" @click="godt">
                <my-button>View revenue and expenditure details</my-button>
            </div> -->
        </div>
        <my-dailog v-model:show="showFlag" :showtopclose="true" :styleType="5">
             <trade-expend-record v-if="showIndex==1"/>
             <ad-expend-record v-else-if="showIndex==2"/>
        </my-dailog>
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,computed } from 'vue'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import {toast} from '@/utils/common.js'
import myButton from '@/components/myButton.vue'
import tradeExpendRecord from './components/tradeExpendRecord.vue'
import adExpendRecord from './components/adExpendRecord.vue'
import myDailog from '@/components/myDailog.vue'
import router from '../../../router'
import { useI18n } from 'vue-i18n'
export default {
    components:{
        mainWrap,
        myButton,
        myDailog,
        tradeExpendRecord,
        adExpendRecord
    },
    setup(){
        const store = useStore()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            showFlag:false,
            showIndex:1,
            data1:{},
            data2:{},
        })

        onMounted(()=>{
            getMyTradeOut()
            getAdsExpendStatistics()
        })

        // 交易支出
        const getMyTradeOut = ()=>{
            store.dispatch('capital/get_my_trade_out',{
                walletAddress:state.userInfo.walletAddress
            }).then(res=>{
                state.data1 = res.data || {}
            })
        }

        // 广告支出统计
        const getAdsExpendStatistics = ()=>{
            store.dispatch('ad/get_ads_expend_statistics',{
                adPlaceJobRecordId: '',
                walletAddress:state.userInfo.walletAddress
            }).then(res=>{
                state.data2 = res.data || {}
            })
        }

        const openDg = (flag)=>{
            state.showIndex = flag
            state.showFlag = true 
        }
        const godt = ()=>{
            router.push('/capital/record')
        }   

        return {
            ...toRefs(state),
            openDg,
            godt
        }
    }
}
</script>

<style lang="scss" scoped>
.expendCon{
    display: flex;
    height: 100%;
    padding: 0 30px 0 0;
    font-family: Inter-Medium, Inter;
    font-weight: 500;
    align-items: center;
    position: relative;
    z-index: 10;
    .incomeList{
        display: flex;
        width: 100%;
        overflow: hidden;
        overflow-x: auto;
        padding: 0;
        margin: -100px 0 0 0;
        li{
            flex: 1;
            min-width: 360px;
            max-width: 700px;
            min-height: 350px;
            background: url(/images/capital/inc1.png) left top no-repeat;
            background-size:100% 100% ;
            padding: 20px 30px;
            &+li{
                margin-left: 20px;
            }
            h5{
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 26px;
                height: 90px;
                line-height: 32px;
                font-family: Poppins-SemiBold Italic, Poppins;
                font-weight: normal;
                color: #C5FAFF;
                line-height: normal;
                text-shadow: 0px 0px 6px #07A3FB;
                //-webkit-background-clip: text;
                //-webkit-text-fill-color: transparent;
                padding: 0;
                margin: 0;
                padding: 0;
                font-weight: 500;
                text-align: center;
            }
            .total{
                min-height: 100px;
                width: 100%;
                background: rgba(103,248,255,0.2000);
                line-height: normal;
                text-align: center;
                padding: 10px 10px 0 10px;
                p{
                    font-size: 20px;
                }
                .amount{
                    font-size: 34px;
                }
            }
            .incTabBox{
                display: flex;
                margin: 20px 0 0 0;
                .item{
                    flex: 1;
                    height: 100px;
                    text-align: center;
                    p{
                        color: rgba(255,255,255,0.5000);
                        font-size: 22px;
                    }
                    .amount{
                        font-size: 26px;
                    }
                }
            }
        }
    }
    .zc-bottom-btn{
        position: absolute;
        z-index: 10;
        width: 850px;
        height: 90px;
        left: 50%;
        bottom: 0;
        margin:0 0 0 -485px;
        padding: 15px 150px 0 150px;
        background: url(/images/capital/zc.png) left top no-repeat;
        background-size:100% 100%;
        .myBtn{
            height: 60px;
            line-height: 60px;
        }
    }
}
    
</style>